.c-huge-citypicker
    background-color: #eee
    position: absolute
    width: 100%
    height: 100%
    overflow: hidden

    input, button
        border: 0 none
        background: transparent

    .c-huge-citypicker-header, .c-huge-citypicker-main
        position: absolute
        top: 0
        left: 0
        width: 100%
        z-index: 5
    .c-huge-citypicker-main
        top: px2rem(112px)
        bottom: 0
        width 100%
        overflow: auto
        -webkit-overflow-scrolling: touch

        dl.c-huge-citypicker-section
            padding: 0 px2rem(12px) px2rem(12px) px2rem(12px)

            dt.c-huge-citypicker-section-title
                color: #969696
                line-height: px2rem(70px)
                font-size: px2rem(24px)
            dd.c-huge-citypicker-section-item
                &.selected
                    &::after
                        content: '';
                        position: absolute;
                        bottom: px2rem(10px)
                        right: px2rem(10px)
                        display: block;
                        width: px2rem(30px)
                        height: @width
                        background: #009ff0 inline-url('images/commons/icon-checked@2x.png') center no-repeat;
                        background-size: 65%
                        border-radius: 50%   

            &[data-type='inline']
                dd.c-huge-citypicker-section-item
                    float: left
                    position: relative
                    border: px2rem(2px) solid #cacaca
                    padding: 0 px2rem(8px)
                    width: px2rem(204px)
                    height: px2rem(68px)
                    line-height: @height
                    margin: 0 px2rem(20px) px2rem(20px) 0
                    text-align: center
                    overflow(ellipsis)
                    background-color: #fff
                    border-radius: px2rem(2px)
            &[data-type='block']
                padding: 0

                dt.c-huge-citypicker-section-title
                    border-top: px2rem(1px) solid #d2d2d2;
                    height: px2rem(48px)
                    line-height: @height
                    padding-left: px2rem(24px)
                    font-size: px2rem(24px)
                    background: #f1f3f7
                dd.c-huge-citypicker-section-item
                    position: relative
                    height: px2rem(90px)
                    padding-left: px2rem(24px)
                    border-top: 1px solid #e2e2e2
                    line-height: @height
                    color: #333
                    font-size: px2rem(30px)
                    overflow(ellipsis)
                    background-color: #fff
                    &.selected
                        &::after
                            right px2rem(24px)
                            bottom px2rem(30px)  

        .c-huge-citypicker-aside
            position: fixed
            z-index: 20
            right: 0
            top: px2rem(100px)
            width: px2rem(80px)
            line-height: px2rem(40px)
            font-size: px2rem(24px)
            color: #969696
            li
                height: @line-height
                text-align: center    

        .c-huge-citypicker-confirm
            position: fixed
            bottom: px2rem(80px)
            right: px2rem(120px)
            height: px2rem(80px)
            width: px2rem(160px)
            background-color: #ff7e00
            line-height: @height
            color: #fff
            text-align: center
            border-radius px2rem(50px)
            font-size: px2rem(30px)
            z-index: 25
        
        .c-huge-citypicker-largeletter
            position: fixed
            left: 50%
            top: 50%
            width: px2rem(175px)
            height: @width
            margin: @height * -0.5 auto auto @width * -0.5
            background-color: rgba(150,150,150,0.8)
            line-height: @height
            font-size: px2rem(90px)
            color: #fff
            text-align: center
            border-radius 50%
            z-index 50                               

    .c-huge-citypicker-header

        .c-huge-citypicker-searchbox
            margin: px2rem(26px) px2rem(22px)
            border: 1px solid #cacaca
            height: px2rem(60px)
            background: #fff inline-url('images/commons/icon-search_1@2x.png') 0.2rem center no-repeat
            background-size: 0.45rem
            border-radius: px2rem(8px)

            .c-huge-citypicker-search
                width  px2rem(50px)
                margin-right px2rem(10px)
                display inline-block
                vertical-align top
                height: 100%
            .c-huge-citypicker-textfield
                width px2rem(560px)
                padding px2rem(30px) 0
                height px2rem(30px)
                line-height: @height
                color: #666
                vertical-align top
            .c-huge-citypicker-cleaner
                position: relative
                width px2rem(60px)
                display inline-block
                vertical-align top
                height: 100%
                &:before
                    content: ''
                    position: absolute
                    display: block
                    top: 50%
                    left: 50%
                    width: 0.5rem
                    height: @width
                    margin: @height * -0.5 auto auto @width * -0.5
                    background: #969696 inline-url('images/commons/btn-close_2-white@2x.png') center no-repeat
                    background-size(50%)
                    border-radius(100%)    